<template>
    <div>
        <div class="top">
            <div class="item">
                <el-input v-model="keyWord" placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
            </div>
            <div class="item">
                <span>状态:</span>
                <el-select class="state" v-model="isActive" style="width: 100px;">
                    <el-option label="启用" value="1"> </el-option>
                    <el-option label="不启用" value="0"> </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-button :style="{ 'background': '#4065E0', 'color': '#fff', 'margin-right': 20+'px' }" @click="search(fontList)">查询</el-button>
                <el-button :style="{ 'background': '#EEEEEE', 'color': '#333333'}" @click="reset">重置</el-button>
            </div>
        </div>
        <div class="middle">
            <div class="mid-left">
                <div v-if="selected">
                    <span @click="multiple">选择</span> 
                </div>
                <div v-else>
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-link class="delete" type="danger" :underline="false" @click="delMobileFont">删除</el-link>
                </div>
                
            </div>
            <el-button :style="{ 'background': '#4065E0', 'color': '#fff' }"  @click="addFont">+ 添加字体</el-button>
        </div>
        <div>
            <draggable v-model="filteList" class="content" :options = "{animation:500}" @update="datadragEnd">
                <div class="item" v-for="(item) in filteList" :key="item.id">
                    <div class="imgBox">
                        <img src=".././ziti1.png">
                    </div>
                    <span> {{ item.name }} </span>
                    <p> 文字的美感与您不期而遇 </p>
                    
                    <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="statusChange"></el-checkbox>
                    <!-- 数据要有isChecked字段 -->
                    <el-button class="deactive" size="small" style="background: #4065E0; color: #fff">启用</el-button>
                </div>
            </draggable>
        </div>
        <!-- 添加字体的dialog -->
        <el-dialog
            title="添加字体"
            :visible.sync="addFontdialog"
            :modal-append-to-body="false"
            width="30%"
            >
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addFontdialog = false">取 消</el-button>
                <el-button type="primary" @click="addFontdialog = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import { getFontList, deleteFont } from 'api/backgroundController/backgroundController'
export default {
    name: 'FontMobile',
    data() {
        return {
            keyWord: '',
            isActive: '1',
            selected: true,
            checkAll: false,
            showCheckbox: false,
            fontList: [],
            filteList: [],
            item: {},
            addFontdialog: false
        }
    },
    methods: {
        // 查询
        search(dataSouce){
           if(dataSouce){
                var _keyword = this.keyWord
                var isActive = parseInt(this.isActive)
                this.filteList = dataSouce.filter(item => {
                    if(item.name.indexOf(_keyword) > -1 && item.isActive == isActive){
                        return item
                    }
                })
            }else{
                return
            }
        },
        // 重置
        reset(){
            this.keyWord = ''
            this.isActive = "1"
            this.filteList = this.fontList
        },
        // 选择
        multiple(){
            this.selected = false
            this.showCheckbox = !this.showCheckbox
        },
        // 全选
        handleCheckAllChange(){
            this.filteList.forEach(item => {
                item.isChecked = this.checkAll
            })
        },
        // 删除
        delMobileFont(){
            var fontIdArr = []
            if(this.filteList.length != 0){
                for(var i = this.filteList.length - 1; i >= 0; i--){
                    if(this.filteList[i].isChecked){
                        fontIdArr.push(this.filteList[i].fontId)
                        this.filteList.splice(i,1);
                    }
                }
            }
            if(fontIdArr.length != 0){
                deleteFont(fontIdArr).then(res => {
                    console.log(res)
                })
            }
            
            this.selected = true
            this.showCheckbox = !this.showCheckbox
        },
        // 选择状态改变时的回调
        statusChange(value){
            var num = 0
                this.filteList.forEach((item,index,arr) => {
                  if(item.isChecked){
                      num++
                  }
                  if(num == arr.length){
                      this.checkAll = true
                  }else{
                    this.checkAll = false
                }
            })
        },
        // 拖拽结束时的事件
        datadragEnd(evt){
            evt.preventDefault();
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
            console.log(this.filteList);
        },
        // 添加字体
        addFont(){
            this.addFontdialog = true
        },
        // 获取手机字体列表
        getList(){
            var params = {
                appId: 'nng0012',
                moduleId: 3
            }
            getFontList(params).then(res => {
                console.log(res)
                if(res.data != null){
                    this.fontList = res.data
                    this.filteList = this.fontList
                }
                
            })
            .catch(res => {
                this.$message.error(res.resultMsg)
            })
        }
    },
    components: {
        draggable
    },
    created(){
        this.getList()
    },
    mounted(){
        // 防止火狐浏览器拖拽的时候以新标签页打开
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
}
</script>

<style lang="scss" scoped>

    .top{
        display: flex;
        justify-content: space-between;
        .item{
        display: flex;
        line-height: 40px;
            span{
                white-space: nowrap;
                padding-right: 10px;
            }
        }
    }
    .middle{
        text-align: right;
        margin: 30px 0;
        line-height: 40px;
        .mid-left{
            float: left;
            span{
                padding-right: 20px;
                color: #666666;
                cursor: pointer;
                font-size: 14px;
            }
        }
    }
    .content{
        box-sizing: border-box;
        .item{
            position: relative;
            padding-left: 50px;
            height: 64px;
            line-height: 64px;
            box-sizing: border-box;
            span{
                display: inline-block;
                width: 300px;
                color: #333333;
                font-size: 14px;
            }
            .imgBox{
                display: inline-block;
                width: 16px;
                height: 100%;
                box-sizing: border-box;
                margin-right: 6px;
            }
            img{
                display: inline-block;
                margin-top: 22px;
                height: 16px;
                width: 16px;
                // vertical-align: middle;
            }
            p{
                display: inline-block;
                height: 100%;
                color: #333333;
                font-size: 24px;
                box-sizing: border-box;
            }
            .el-checkbox{
                position: absolute;
                top: 50%;
                left: 6px;
                width: 14px;
                height: 14px;
                background-color: pink;
                transform: translateY(-50%);
                line-height: 0;
            }
            .deactive{
                position: absolute;
                top: 50%;
                right: 6px;
                transform: translateY(-50%);
            }
        }
    }
</style>

